// 消息推送
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Button, Spin, Form, Input, Table, Modal, Select,message,DatePicker } from 'antd'
/* 引用接口文档路径 */
import {messagePushSelect,addBaseDataSelect,messagePushInfo,messagePushSend} from 'actions/business'
import '../../style/userControl.less'
import ModalAddMessagePush from './addMessagePushModal';
const FormItem = Form.Item
@Form.create({})
//abc
@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)
export default class app extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list:"",//基础数据列表
      contentModal:false,//列表内容详情弹窗
      modalList:"",//列表内容详情
      addModalFlg:false,//新增报告弹窗
      addModalType:"",
      createTime:"",
      addBaseData:"",//新增所需的基础数据
    }
    this.keyword={"title":"","pushTime":"",};//搜索关键词
    this.currentNumber = 1;//当前页面
    this.pagesize = 10;//每页条数
  }
  componentDidMount() {
    this.selectList();
    this.dataTypeList();
  }
  
  selectFn(){//点击搜索按钮
    this.keyword = {
      "title":this.props.form.getFieldValue('title'),
      "pushTime":this.state.createTime,
    };
    this.currentNumber=1;
    this.selectList();
  }
  selectList(pageNumber){//查询列表
    const datajson = Object.assign({"start":pageNumber||1,"end":this.pagesize}, this.keyword);
    this.currentNumber = pageNumber||1;
    this.props.dispatch(messagePushSelect(
      datajson,
      (respose) => {
        this.setState({
          list: respose,
        })
    }))
  }
  
  createTimeFn(value){//推送日期
    this.setState({
      createTime:value ? value._d.format("yyyy-MM-dd hh:mm:ss") : '' 
    })
  }

  dataTypeList(){//基础数据查询
    this.props.dispatch(addBaseDataSelect('',
      (respose) => {
        this.setState({
          addBaseData: respose.respData,
        })
    }))
  }

  addReport(type,id){//新
    //编辑的情况  带数据去组件
    if(type == 2){
      //查询数据-传递到弹窗组件
      this.props.dispatch(messagePushInfo({"id":id},
      (respose) => {
          this.setState({
          addModalFlg: true,
          modalList:respose,
          addModalType:type,
        })
      }))
    }else{//新增的情况
      this.setState({
        addModalFlg: true,
        modalList:{},
        addModalType:type,
      })
    }
  }
  pushMessage(id){
    Modal.confirm({
      content:"确定要推送该条信息么？",
      onOk:()=>{
        this.props.dispatch(messagePushSend(
          {"id":id},
          (respose) => {
            message.success(respose.respMsg);          
            this.selectList(this.currentNumber);
        }))
      },
      onCancel:()=>{}
    })
  }

  addModalCancel(){//关闭新增弹窗
    this.setState({
      addModalFlg: false,
    })
  }

  contentModalCancel(){//关闭查看弹窗
    this.setState({
      contentModal: false,
    },()=>{
      this.setState({
        modalList: "",
      })
    })
  }

  showModal(data){//打开查看弹窗
    this.setState({
      contentModal: true,
      modalList:data
    })
  }

  columns() {//表格标题
    return [
      {
        title: '推送标题',
        dataIndex: 'title',
        key: 'title',
        width: '10%',        
      },
      {
        title: '推送日期',
        dataIndex: 'pushTime',
        key: 'pushTime',
        width: '10%',
      },
      {
        title: '推送对象',
        dataIndex: 'userType',
        key: 'userType',
        width: '10%',
      },
      {
        title: '推送人',
        dataIndex: 'accountId',
        key: 'accountId',
        width: '10%',
      },
      {
        title: '推送状态',
        dataIndex: 'status',
        key: 'status',
        width: '10%',
      },
      {
        title: '操作',
        width: '10%',
        render: (text, recordId, index) => 
        <div>
          {
            text.pushStatus == 2 ?
            <Button type="primary" size="small" onClick={this.showModal.bind(this,text)} style={{marginRight:"5px",marginBottom:"5px"}}>查看</Button>   
            :
            <div>
              <Button type="primary" size="small" onClick={this.addReport.bind(this,2,text.id)} style={{marginRight:"5px",marginBottom:"5px"}}>编辑</Button>
              <Button type="primary" size="small" onClick={this.pushMessage.bind(this,text.id)} style={{marginRight:"5px",marginBottom:"5px"}}>立即推送</Button>   
            </div>
          }
        </div>,        
      },
    ]
  }
  
  render () {
    const { getFieldDecorator } = this.props.form    
    const respData = this.state.list.respData ? this.state.list.respData : [];//刷新页面调用接口数据赋值
    const modalList = this.state.modalList ? this.state.modalList :[];
    const dateFormat = 'YYYY/MM/DD';
    return (
      <div className="page">
        {/* 搜索条件筛选块 */}
        <div className="searcDiv">
          <Form onSubmit={this.selectFn.bind(this)} layout="inline">
            <FormItem label="推送标题">      
              {
                getFieldDecorator('title', {
                  rules: [{
                    required: false,
                  }],
                })(
                  <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                )
              }                      
            </FormItem>
            <FormItem label="推送日期">
              <DatePicker onChange={this.createTimeFn.bind(this)} format={dateFormat} />
            </FormItem>
            <Button type="primary" onClick={this.selectFn.bind(this)}>搜索</Button>
            <Button type="primary" onClick={this.addReport.bind(this,1)}>新增</Button>
          </Form>
        </div>
        {/*数据渲染列表*/}
        <Spin spinning={false}>
          <Table
            rowKey="id" 
            columns={this.columns()}//表格标题列 
            dataSource={respData.sysMessageList}
            pagination={{ total: respData.count, current:this.currentNumber,pageSize: this.pagesize, onChange: this.selectList.bind(this)}}
            scroll={{ y: true }}
            rowClassName={(record, index) => record.dataStatus == 2 ? 'tableRed' : ''} 
          />
        </Spin>
        {/* 新增弹窗 */}
        {
          this.state.addModalFlg ?
          <ModalAddMessagePush 
            type={this.state.addModalType}
            ModalFlg={this.state.addModalFlg} 
            ModalCancel={this.addModalCancel.bind(this)} 
            callback={this.selectList.bind(this)}
            content={this.state.modalList.respData ? this.state.modalList.respData : {}}
            baseData={this.state.addBaseData}
          /> : ""
        }
        
        {/* 信息展示弹窗 */}
        <Modal
          width={"80%"}
          visible={this.state.contentModal}
          title="推送详情"
          onCancel={this.contentModalCancel.bind(this)}
          footer={''}
        >
          <ul className="joinBlackListModal">
            <li>
              <span className="title">标题:</span><span className="content">{modalList.title}</span>
            </li>
            <li>
              <span className="title">推送日期:</span><span className="content">{modalList.pushTime}</span>
            </li>
            <li>
              <span className="title">推送对象:</span><span className="content">{modalList.userType}</span>
            </li>
            <li>
              <span className="title">推送人:</span><span className="content">{modalList.accountId}</span>
            </li>
            <li>
              <span className="title">推送状态:</span><span className="content">{modalList.status}</span>
            </li>
            <li>
              <span className="title">链接:</span><span className="content">{modalList.url}</span>
            </li>

          </ul>
        </Modal>
      </div>
    )
  }
}
